<template>
	<view class="payment">
		<view class="header">
			<p>我的余额</p>
			<p><span>￥</span><span>4000</span></p>
		</view>
		<view class="tabs">
			<view class="item" :class="{active:current==1 ? true : false}" @click="chooseClick(1)">
				<span>账户充值</span>
			</view>
			<view class="item" :class="{active:current==2 ? true : false}" @click="chooseClick(2)">
				<span>佣金转入</span>
			</view>
		</view>
		<view class="cont" v-if="current==1">
			<view class="payCont">
				<view class="list">
					<view class="item" :class="{active:paytype==index ? true : false}" 
					v-for="(item,index) in payList" @click="choosePayPrice(index)" :key="index">
						<p>{{item.price}}元</p>
						<p>赠送：{{item.little}}元</p>
					</view>
					<view class="item" :class="{active:paytype==-1 ? true : false}" @click="choosePayPrice(-1)">
						<input type="text" placeholder="其他"/>
					</view>
				</view>
			</view>
			<view class="zhuyi">
				<p>1.充值金额最少为1元</p>
				<p>2.充值后只能用于消费</p>
				<p>3.提现金额需要手续费3%</p>
				<p>4.提现到账需要2~3个工作日</p>
			</view>
			<view class="btn">
				<span>立即充值</span>
			</view>
		</view>
		<view class="cont" v-if="current==2">
			<view class="pay">
				<view class="cot">
					<span>￥</span>
					<input type="text" placeholder="0.00"/>
				</view>
			</view>
			<view class="zhuyi">
				<p>1.充值金额最少为1元</p>
				<p>2.充值后只能用于消费</p>
				<p>3.提现金额需要手续费3%</p>
				<p>4.提现到账需要2~3个工作日</p>
			</view>
			<view class="btn">
				<span>立即转入</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paytype:-1,
				current:1,
				payList:[
					{
						price:"10",
						little:"1"
					},
					{
						price:"50",
						little:"5.00"
					},
					{
						price:"100",
						little:"10"
					},
					{
						price:"200",
						little:"20"
					},
					{
						price:"300",
						little:"30"
					},
					{
						price:"500",
						little:"50"
					},
					{
						price:"1000",
						little:"100"
					}
				],
			}
		},
		methods: {
			choosePayPrice(index){
				this.paytype=index;
			},
			chooseClick(type){
				this.current=type;
			}
		}
	}
</script>

<style lang="scss" scoped>
.btn{
	width:85%;
	height:40px;
	background: linear-gradient(90deg, #FF7931 0%, #F11B09 100%);
	border-radius:20px;
	text-align:center;
	line-height:40px;
	margin:10px auto;
	color:#ffffff;
}
.zhuyi{
	padding:10px;
}
.pay{
	width:95%;
	margin:0 auto;
	border-bottom:1px solid #f0f0f0;
	.cot{
		align-items:center;
		display:flex;
		justify-content:center;
		height:100px;
		font-size: 60rpx;
		input{
			width:60px;
			font-size: 60rpx;
		}
	}

}
.payCont{
	.list{
		width:100%;
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		.active{
			border: 1px solid #e83323;
		}
		.item{
			display:flex;
			align-items:center;
			justify-content:center;
			flex-direction:column;
			width:30%;
			height:80px;
			border-radius:10px;
			margin:6px 5px;
			background-color:#f4f4f4;
			p:nth-child(1){
				font-size:20px;
			}
			p:nth-child(2){
				font-size:12px;
			}
			input{
				display:flex;
				align-items:center;
				justify-content:center;
				text-align: center;
				font-size: 40rpx;
			}
		}
	}
}
.tabs{
	display:flex;
	align-items:center;
	background-color:#ffffff;
	justify-content:space-between;
	border-bottom:1px solid #f0f0f0;
	.active{
		border-bottom:1px solid #ff0000;
		color:#ff0000;
	}
	.item{
		width:33.3%;
		text-align:center;
		padding:20px;
	}
}
.header{
	width:100%;
	height:140px;
	background-color:#e83323;
	text-align:center;
	overflow:hidden;
	color:#ffffff;
	p{
		margin-top:20px;
	}
	p:nth-child(1){
		color:#f0f0f0;
	}
	p:nth-child(2){
		span:nth-child(2){
			font-size:30px;
		}
	}
}
</style>
